<template>
  <div class="Vxe" v-loading="loading">
    <vxe-grid
        border
        resizable
        show-overflow
        show-header-overflow
        ref="xGrid"
        height="600"
        :row-config="{isCurrent: true, isHover: true}"
        :toolbar-config="{slots: {buttons: 'toolbar_buttons'}}"
        :checkbox-config="{checkField: 'checked', labelField: 'name'}"
        :scroll-x="{enabled: true, gt: 0}"
        :scroll-y="{enabled: true, gt: 0}"
        @cell-click="cellClick"
        @cell-dblclick="cellDblclick">
      <template #toolbar_buttons>
        <vxe-button @click="loadColumnAndData(10, 10)">10列10条</vxe-button>
        <vxe-button @click="loadColumnAndData(10, 10000)">10列1w条</vxe-button>
        <vxe-button @click="loadColumnAndData(10, 100000)">10列10w条</vxe-button>
        <vxe-button @click="loadColumnAndData(10, 500000)">10列50w条</vxe-button>
        <h2>{{loading_info}}</h2>
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
import VXETable from 'vxe-table'
import {httpRequest} from "@/untils/httpRequest.ts";
import {ElMessage} from "element-plus";
import {onMounted, ref} from "vue";
import _ from "lodash";
const loading = ref(false)
const xGrid = ref(null)
let loading_info = ref('')

onMounted(() => {
  loadColumnAndData(5, 10)
})
function loadColumnAndData(colSize, rowSize) {
  loading.value = true
  loading_info.value = ''
  Promise.all([
    mockColumns(colSize),
    mockList(rowSize)
  ]).then(rest => {
    const columns = rest[0]
    const data = rest[1]
    const startTime = Date.now()
    // 使用函数式加载，阻断 vue 对大数组的双向绑定
    if (xGrid.value) {
      Promise.all([
        xGrid.value.reloadColumn(columns),
        xGrid.value.reloadData(data)
      ]).then(() => {
        loading_info.value = `渲染 ${colSize} 列 ${rowSize} 行，用时 ${Date.now() - startTime}毫秒`
        VXETable.modal.message({ content: `渲染 ${colSize} 列 ${rowSize} 行，用时 ${Date.now() - startTime}毫秒`, status: 'info' })
        loading.value = false
      })
    }
  })
}
function  mockColumns (size) {
  return new Promise(resolve => {
    const cols = []
    for (let index = 0; index < size; index++) {
      if (index === 0) {
        cols.push({
          title: `Col_${index}`,
          type: 'seq',
          fixed: 'left',
          width: 100
        })
      } else if (index === 1) {
        cols.push({
          title: `Col_${index}`,
          type: 'checkbox',
          fixed: 'left',
          width: 200
        })
      } else if (index === size - 1) {
        cols.push({
          title: `Col_${index}`,
          field: `col${index}`,
          fixed: 'right',
          width: 140
        })
      } else {
        cols.push({
          title: `Col_${index}`,
          field: `col${index}`,
          width: 160
        })
      }
    }
    resolve(cols)
  })
}
function  mockList (size) {
  return new Promise(resolve => {
    const list = []
    for (let index = 0; index < size; index++) {
      list.push({
        name: `名称${index}`,
        checked: false,
        col1: '0',
        col2: 123,
        col3: 18,
        col4: 234,
        col5: 3,
        col6: 'shenzhen',
        col599: `600_${index}`,
        col999: `1k_${index}`,
        col4999: `5k_${index}`,
        col9999: `1w_${index}`,
        col19999: `2w_${index}`
      })
    }
    resolve(list)
  })
}

let clickTimer = ref(null)
function cellClick(s) {
  clearTimeout(clickTimer.value)
  clickTimer.value = setTimeout(() => {
    console.log('单击事件');
  }, 300)
}
function cellDblclick() {
  clearTimeout(clickTimer.value);
  console.log('双击事件')
}
</script>

<style scoped>
.Vxe {
  width: 100%;
  height: 100%;
}
</style>